<template>
  <div class="userInfoBox clearfix col-md-10">
    <h1>个人信息</h1>
    <form class="form-horizontal" role="form">
      <div class="touxiang">
        <img :src="imgsrc" alt>
      </div>

      <div class="form-group col-md-6">
        <label class="col-sm-3 control-label" for="uid">ID:</label>
        <div class="col-sm-9">
          <input class="form-control userid" id="uid" v-model="uid" disabled type="text">
        </div>
      </div>
      
      <div class="form-group col-md-6">
        <label for="inputPassword" class="col-sm-3 control-label">用户名：</label>
        <div class="col-sm-9">
          <input
            class="form-control username"
            id="inputPassword"
            v-model="username"
            type="text"
            disabled
          >
        </div>
      </div>

      <div class="form-group col-md-6">
        <label for="disabledTextInput" class="col-sm-3 control-label">密码：</label>
        <div class="col-sm-9">
          <input
            type="text"
            class="form-control passwd"
            v-model="passwd"
            id="disabledTextInput"
            v-bind:disabled="flag"
          >
        </div>
      </div>
      <div class="form-group col-md-6">
        <label class="col-sm-3 control-label" for="inputSuccess">电话：</label>
        <div class="col-sm-9">
          <input type="text" class="form-control tel" v-model="tel" v-bind:disabled="flag">
        </div>
      </div>
      <div class="form-group col-md-6">
        <label class="col-sm-3 control-label">地址：</label>
        <div class="col-sm-9">
          <input class="form-control addr" v-model="addr" v-bind:disabled="flag">
        </div>
      </div>
      <div class="form-group col-md-6">
        <label class="col-sm-3 control-label" for="inputError">生日</label>
        <div class="col-sm-9">
          <input
            type="date"
            class="form-control birthday"
            v-model="birthday"
            id="inputError"
            v-bind:disabled="flag"
          >
        </div>
      </div>
      <div class="form-group gender col-md-6">
        <label class="col-md-3 control-label" for="inputWarning">性别</label>
        <div class="col-sm-9">
          <!-- <input type="text" class="form-control" id="inputWarning"> -->
          <label class="col-md-4">
            男
            <input
              type="radio"
              checked
              name="gender"
              v-model="gender"
              v-bind:disabled="flag"
              value="男"
            >
          </label>
          <label class="col-md-4">
            女
            <input type="radio" name="gender" v-model="gender" v-bind:disabled="flag" value="女">
          </label>
        </div>
      </div>
      <div class="col-md-12 infoBtnGroup">
        <div class="col-sm-9">
          <button
            type="button"
            class="btn btn-primary col-md-1 col-md-offset-6 infoCancelBtn"
            v-on:click="cancel()"
          >取消</button>
          <button
            type="button"
            class="btn btn-primary col-md-1 col-md-offset-1 infoEditBtn"
            v-on:click="edit()"
          >{{btnVal}}</button>
        </div>
      </div>
    </form>
  </div>
</template>

<style>
@import "../assets/css/userInfo.css";
</style>


<script>
export default {
  data() {
    return {
      flag: true,
      uid: "",
      tel: "",
      username: "",
      imgsrc:"",
      passwd: "",
      gender: "男",
      birthday: "1900-01-01",
      addr: "",
      btnVal: "修改"
    };
  },
  mounted() {
    let that = this;
    $.ajax({
      type: "post",
      url: "http://127.0.0.1:8080/linkMan/linkman/selectByTel",
      data: {
        tel: sessionStorage.getItem("tel")
        // tel:"13111111111"
      },
      dataType: "json",
      success: function(res) {
        console.log("---res: ", res);
        let data = res.data;
        that.uid = data.userid;
        that.tel = data.tel;
        that.username = data.username;
        that.passwd = data.passwd;
        that.gender = data.gender;
        (that.birthday = data.birthday), (that.addr = data.addr);
      },
      error: function(err) {
        console.log("err: ", err);
      }
    });
  },
  methods: {
    cancel() {
      this.flag = true;
      this.btnVal = "修改";
    },
    edit() {
      if (this.flag) {
        this.flag = false;
        this.btnVal = "提交";
      } else {
        var that = this;
        let data = {
          id: that.uid,
          username: that.username,
          passwd: that.passwd,
          addr: that.addr,
          gender: that.gender,
          tel: that.tel,
          birthday: that.birthday
        };
        var url = "http://127.0.0.1:8080/linkMan/linkman/updateUser";
        console.log("data:", data);
        that.operationUser(data, url);
        this.flag = true;
        this.btnVal = "修改";
      }
    },
    operationUser: function(data, url) {
      $.ajax({
        url: url,
        method: "post",
        dataType: "json",
        async: false,
        data: data,
        success: function(res) {
          console.log("post res: ", res);
          alert(res.msg);
        },
        error: function(error) {
          console.log("post error: ", error);
        }
      });
    }
  }
};
</script>

